// pages/captions/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    initData: {
      // 字幕数据
      captions: '',
      // 背景颜色
      bgColor: 'rgb(0,0,0)',
      // 字体颜色
      textColor: 'rgb(255,255,255)',
      // 字体颜色
      textSize: '160',
      // 是否横屏
      level: true,
      // 速度
      velocity: 150
    },

    colorPickerPopup: {
      type: '',
      initColor: 'rgb(0,0,0)',
      show: false,
    }

  },

  onLoad: function () {
    this.getStorageData()
  },

  onShow: function () {
    this.getStorageData()
  },

  // 获取本地储存的数据
  getStorageData() {
    wx.getStorage({
      key: 'captionsData',
      success: res => {
        const data = JSON.parse(res.data || '{}')
        for (const dataKey in this.data.initData) {
          const v = data[dataKey]
          if (v !== undefined) {
            const key = `initData.${dataKey}`
            this.setData({
              [key]: v
            })
          }
        }
      }
    })
  },

  // 输入框输入的时候
  onInput(e) {
    const key = `initData.${e.target.id}`
    this.setData({
      [key]: e.detail.value
    })
  },

  // 颜色选择弹框 - 打开
  colorPickerPopupOpen(e) {
    this.setData({
      colorPickerPopup: {
        type: e.currentTarget.dataset.type,
        initColor: this.data.initData[e.currentTarget.dataset.type],
        show: true
      }
    })
  },

  // 颜色选择弹框 - 确认
  colorPickerPopupConfirm(e) {
    const key = `initData.${this.data.colorPickerPopup.type}`
    this.setData({
      [key]: e.detail.color
    })
  },

  // 是否横屏滑块变化
  switchChange({detail}) {
    this.setData({'initData.level': detail});
  },

  // 确认
  confirm() {
    for (const key in this.data.initData) {
      if (key === 'level') continue
      if (!this.data.initData[key]) {
        wx.showToast({
          title: '必填项不能为空',
          icon: 'error'
        })
        return
      }
    }


    // 将数据储存在本地
    wx.setStorage({
      key: 'captionsData',
      data: JSON.stringify(this.data.initData)
    })
    wx.navigateTo({
      url: '../look/index',
    })
  },
})
